const template = `
	<div class="room">
		<van-nav-bar
		  :title="roomName"
		  left-arrow
			@click-left="onBack"
		/>
		<div>
			<div v-for="(item, index) in aiPointList" :key="index">
				<div class="point-item">
					<span class="point-name">{{ item.name }}&nbsp;({{ item.value }})</span>
					<div class="point-value-wrapper">
						<span class="point-unit">{{ item.unit }}</span>
						<span class="point-value">
							<input type="text" class="patrol-point-input" v-model="aiPatrolDataList[index].value" />
						</span>
					</div>
				</div>
				
			</div>
			
			<div v-for="(item, index) in diPointList" :key="index">
				<div class="point-item">
					<span class="point-name">{{ item.name }}&nbsp;({{ diStateText[item.value] }})</span>
					<div class="point-value-wrapper point-di">
						<a @click="onPointClick(1, index)" class="point-di-icon-wrapper" :class="{ 'stop': diPatrolDataList[index].value === 1 }">
							<van-icon name="stop-circle" />
							<span class="text">停止</span>
						</a>
						<a @click="onPointClick(2, index)" class="point-di-icon-wrapper" :class="{ 'ok': diPatrolDataList[index].value === 2 }">
							<van-icon name="play-circle" style="margin: 0 16px;" />
							<span class="text">正常</span>
						</a>
						<a @click="onPointClick(3, index)" class="point-di-icon-wrapper" :class="{ 'notok': diPatrolDataList[index].value === 3 }">
							<van-icon name="warning" />
							<span class="text">异常</span>
						</a>
					</div>
				</div>
			</div>
			
			<div class="point-item">
				<span class="point-name">本车间有无异常</span>
				<div class="point-value-wrapper point-room-di">
					<a @click="onRoomPointClick(1)" class="point-room-di-icon-wrapper" :class="{ 'ok': roomState === 1 }">
						<van-icon name="checked" />
						<span class="text">正常</span>
					</a>
					<a @click="onRoomPointClick(2)" class="point-room-di-icon-wrapper" :class="{ 'notok': roomState === 2 }">
						<van-icon name="clear" style="margin: 0 16px;" />
						<span class="text">异常</span>
					</a>
				</div>
			</div>
			<div class="point-item">
				<span class="point-name">巡检备注</span>
				<div class="point-value-wrapper">
					<textarea v-model="remark" style="font-size: 16px;width: 200px;height: 40px;border: none;border-bottom: 1px solid #e8e8e8;"></textarea>
				</div>
			</div>
			<div class="point-item">
				<van-uploader v-model="fileList" capture="camera" />
			</div>
			
		</div>
		
		<van-button 
			type="primary" 
			block round 
			@click="submitForm"
			style="width: 80%;margin: 30px auto;">提交数据</van-button>
	</div>
`;

export default {
	created() {
		axios.get('/patrolRecordSs/getListByPid/' + this.roomId).then(resp => {
			let data = resp.data;
			
			resp.data.forEach(v => {
				if(v.patrolType === 1) { // 数字量
					this.aiPointList.push({
						id: v.id,
						pointId: v.pointId,
						name: v.pointName,
						code: v.pointCode,
						value: v.onlineData || 0,
						unit: '',
					});
					this.aiPatrolDataList.push({
						id: v.id,
						pointId: v.pointId + '-patrol',
						name: v.pointName,
						code: v.pointCode,
						value: '',
						unit: '',
					});
				} else if(v.patrolType === 2) { // 开关量
					this.diPointList.push({
						id: v.id,
						pointId: v.pointId,
						name: v.pointName,
						code: v.pointCode,
						value: 1,
						unit: '',
					});
					this.diPatrolDataList.push({
						id: v.id,
						pointId: v.pointId + '-patrol',
						name: v.pointName,
						code: v.pointCode,
						value: 2,
						unit: '',
					});
				}
			});
			
			this.getRealtimeData();
			this.getRealtimeDataTimer = setInterval(this.getRealtimeData, 30 * 1000);
			
		});
	},
	
	props: {
		roomId: {
			type: String,
			required: true,
		},
		roomName: {
			type: String,
			required: true,
		},
	},
	
	data() {
		return {
			diStateText: ['停止', '正常', '异常'],
			fileList: [],
			// state: 'play',
			roomState: 1, // 车间是否正常，0未检，1正常，2异常
			remark: '',
			aiPointList: [],
			aiPatrolDataList: [],
			diPointList: [],
			diPatrolDataList: [],
			getRealtimeDataTimer: null,
		}
	},
	destroyed() {
		clearInterval(this.getRealtimeDataTimer);
		this.getRealtimeDataTimer = null;
	},
	methods: {
		// 提交表单
		submitForm() {
			// 表单验证
			let array = [...this.aiPatrolDataList, ...this.diPatrolDataList];
			let valid = true;
			let errorMsg = '';
			for (let i = 0; i < array.length; i++) {
				if(array[i].value == null) {
					errorMsg = `【${array[i].name}】为必填项`;
					valid = false;
					break;
				}
			}
			
			if(!valid) {
				this.$toast(errorMsg);
				return;
			}
			// 上传图片
			let formData = new FormData();
			this.fileList.forEach(file => {
				formData.append('files', file.file);
			});
			
			axios.post(`/files/uploadFileList`, formData, {
				'content-type': 'multipart/form-data',
			}).then(resp => {
				// 上传的文件id
				let fileIds = resp.data.reduce((accu, v) => {
					accu.push(v.id);
					return accu;
				}, []).join(',');
				// 巡检点数据
				let patrolRecordSList = [];
				this.aiPointList.forEach((v,i) => {
					patrolRecordSList.push({
						id: v.id,
						patrolData: Number(this.aiPatrolDataList[i].value),
						onlineData: v.value,
					});
				});
				this.diPointList.forEach((v,i) => {
					patrolRecordSList.push({
						id: v.id,
						patrolData: Number(this.diPatrolDataList[i].value),
						onlineData: v.value,
					});
				});
				
				let json = {
					id: this.roomId,
					state: this.roomState,
					remark: this.remark,
					fileIds,
					patrolRecordSList,
				};
				axios.post(`/patrolUnits/saveTask`, json).then(resp => {
					this.$router.go(-1);
				});
				
			});
			
		},
		// 获取实时数据
		getRealtimeData() {
			axios.post(`/realtime/getRealtimeData.do`).then(resp => {
				if(resp.status === 200) {
					let realtimeData = resp.data;
					this.aiPointList.forEach((v,i) => {
						let point = realtimeData[v.code];
						if(point) {
							v.value = point.valueFormat;
							v.unit = point.unit;
						} else {
							// this.aiPatrolDataList[i].value = 0.88;
						}
					});
				}
			})
		},
		onBack() {
			this.$router.go(-1)
		},
		onPointClick(state, index) {
			this.diPatrolDataList[index].value = +state;
		},
		onRoomPointClick(state) {
			this.roomState = +state;
		}
	},
	template,
	
}